<template>
  <div>
    <component :is="AppDesigner" />
    <component :is="LayoutComponent[layout]" v-if="!screen.isMobile" />
    <component :is="LayoutMobile" v-if="screen.isMobile" />
  </div>
</template>

<script setup lang="ts" name="layout">
  import { watchEffect, ref } from 'vue'
  import { useScreenStore } from '@/layouts/hooks/index.ts'
  import { computed, type Component } from 'vue'
  import { useAppStore } from '@/stores/useAppStore'
  import { useRoute } from 'vue-router'

  import LayoutDefault from '@/layouts/LayoutDefault/index.vue'
  import LayoutBlank from '@/layouts/LayoutBlank/index.vue'
  import LayoutMobile from '@/layouts/LayoutMobile/index.vue'
  import AppDesigner from '@/components/appdesigner/AppDesigner.vue'

  type LayoutType = 'default' | 'blank' | 'mobile'

  const LayoutComponent: Record<LayoutType, Component> = {
    default: LayoutDefault,
    blank: LayoutBlank,
    mobile: LayoutMobile,
  } as const

  const appStore = useAppStore()
  const screen = useScreenStore()

  watchEffect(() => {
    //const { deviceType, width, current } = screen.value
    // console.log(`当前设备: ${deviceType}`)
    // console.log(`当前宽度: ${width}px`)
    // console.log(`当前断点: ${current}`)
    // if (screen.value.isDesktop) {
    //   console.log('桌面端')
    // } else if (screen.value.isLaptop) {
    //   console.log('笔记本')
    // } else if (screen.value.isTablet) {
    //   console.log('平板')
    // } else {
    //   console.log('手机')
    // }
  })

  // 从当前路由获取布局，如果未指定则使用 store 中的值
  const layout = computed<LayoutType>(() => {
    const route = useRoute()
    return (route.meta.layout as LayoutType) || appStore.layout
  })
</script>

<style scoped lang="scss"></style>
